<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>购物车</title>
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
  <style>
    [v-cloak] {
      display: none
    }
  </style>
</head>
<body>
<div id="app" v-cloak>
  <div class="container">
    <div class="row">
      <!-- iview ,mintui,elementui -->

      <table class="table table-bordered table-hover">
        <span class="h2 text-warning m-md-auto">购物车</span>
        <tr>
          <th>全选 <input type="checkbox" v-model="checkAll"></th>
          <th>商品</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
        <tr v-for="(product,index) in products">
          <td><input type="checkbox" v-model="product.isSelected" ></td>
          <td><img :src="product.productCover" width="100" :title="product.productName">{{product.productInfo}}</td>
          <td>{{product.productPrice}}</td>
          <!-- .lazy当输入框失去焦点时触发 -->
          <td><input type="number" v-model.number="product.productCount" min="1"></td>
          <td>{{product.productPrice * product.productCount | toFixed(2)}}</td>
          <td><button class="btn-danger" @click="remove(product)">删除</button></td>
        </tr>
        <tr>
          <td colspan="6">
            总价格：{{totalAm | toFixed(2)}}
          </td>
        </tr>
      </table>
    </div>
  </div>

</div>

</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<!-- 基于promise的 -->
<script src="../node_modules/axios/dist/axios.js"></script>
<script>
  //1.使用变量时需要初始化，否则新加的属性不会导致页面刷新
  let vm = new Vue({
    el: '#app',
    computed:{  //
      checkAll:{
        get(){  //get 和 set this指向实例
          //默认v-model会获取checkAll的值，会调用get方法
          //当products变化会重新计算
          return this.products.every(item => item.isSelected);
        },
        set(val){
          this.products.forEach(item => item.isSelected = val)
        }
      },
      // totalAm:{
      //   get(){ //算总价格,总价会被缓存，如果数据不发送变化就不会重新执行
      //       return this.products.reduce((prev,next) => {
      //         if(next.isSelected){
      //           return prev + next.productPrice * next.productCount;
      //         }else{
      //           return prev;
      //         }
      //       },0)
      //   }
      // }
      totalAm(){
         //算总价格,总价会被缓存，如果数据不发送变化就不会重新执行
          return this.products.reduce((prev,next) => {
            if(next.isSelected){
              return prev + next.productPrice * next.productCount;
            }else{
              return prev;
            }
          },0)
      }
    },
    created() { //数据被初始化后被调用,this指向也是vm
      console.log(this.products)
      this.getData();
    },
    filters:{
      toFixed(input,param1) { //input是前面的内容，param1是tofixed传递的参数
        return '￥'+ input.toFixed(param1);
      }
    },
    methods:{
      getData(){
        axios.get('./3.cart.json').then(res => { //success
          console.log(res);
          this.products = res.data;
        }, err => { //error
          console.log(err)
        })
      },
      remove(p){
        this.products = this.products.filter(item => item!==p);
      }

    },
    data: {
      products: []
    }
  })

</script>
</html>
